<template>
  <div v-loading="loading" class="padding grid-content">
    <el-form inline>
      <el-form-item>
        <year-month-picker v-model="time"></year-month-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="clickSearch">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <grid-item-one
      title="能源消费情况分析"
      :data="gridItemOneData"
    ></grid-item-one>
    <grid-item-two
      v-if="gridItemTwoData"
      title="能源消费总量趋势"
      :data="gridItemTwoData"
    ></grid-item-two>
    <grid-item-three
      v-if="gridItemThreeData"
      title="能源消费结构及占比"
      :data="gridItemThreeData"
    ></grid-item-three>
    <template v-if="energyType">
      <focus-energy
        ref="focusEnergy"
        v-for="item in energyType"
        :key="item.energyType"
        :title="`${item.name}数据分析`"
        :time-type="timeType"
        :time="time"
        :type="item.energyType"
        :typeName="item.name"
        :unit="item.unit"
      ></focus-energy>
    </template>
    <el-backtop target=".layout-content"></el-backtop>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one';
import GridItemTwo from './grid-item-two';
import GridItemThree from './grid-item-three';
import FocusEnergy from '@/views/data-presentation-overview/focus-energy';

import YearMonthPicker, {
  getTimeTypeFromTime
} from '@/components/year-month-picker';

import MixinGridItemOne from './mixin-grid-item-one';
import MixinGridItemTwo from './mixin-grid-item-two';
import MixinGridItemThree from './mixin-grid-item-three';

export default {
  name: 'data-presentation-overview',
  mixins: [MixinGridItemOne, MixinGridItemTwo, MixinGridItemThree],
  components: {
    GridItemOne,
    GridItemTwo,
    GridItemThree,
    FocusEnergy,
    YearMonthPicker
  },
  data() {
    return {
      loading: false,
      time: ''
    };
  },
  computed: {
    energyType() {
      return this.$store.state.energyType;
    },
    timeType() {
      return getTimeTypeFromTime(this.time);
    }
  },
  mounted() {
    this.getAllData();
    this.$store.dispatch('getEnergyType').then(() => {
      this.getFocusEnergyData();
    });
  },
  methods: {
    getParams() {
      return {
        time: this.time,
        timeType: this.timeType
      };
    },
    clickSearch() {
      this.getAllData();
      this.getFocusEnergyData();
    },
    async getFocusEnergyData () {
      const ts = this.$refs.focusEnergy;
      if (ts) {
        ts.forEach(t => {
          t && t.getData();
        });
      }
    },
    async getAllData() {
      this.loading = true;
      try {
        await this.getGridItemOneData();
        await this.getGridItemTwoData();
        await this.getGridItemThreeData();
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/style/variable.scss';

.el-backtop {
  z-index: 2100;
}
.grid-content {
  display: flex;
  flex-direction: column;
  gap: $gutter;
}

::v-deep .content-block {
  background: white;
  border-radius: 4px;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;

  .info-head {
    padding: 20px $gutter 10px $gutter;
    font-size: 16px;
  }

  .info-content {
    .width-100 {
      width: 100%;
    }
    .flex {
      gap: $gutter;
    }
    .lines-block,
    .pie-block {
      background: white;
    }
  }

  &.block-half-1 {
    flex: 60%;
  }

  &.block-half-2 {
    flex: 40%;
  }
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
